import { Button, Typography } from "@mui/material";
import {
    Box,
    Chip,
  } from "@mui/material";
import React, { useEffect } from "react";
import { useState } from "react";
import MyDialog from "../../../components/MyDialog";
import Dataform from "../../../components/Dataform";
import { renderCellExpand } from "../../../components/RenderCellExpand";
import GetChipType from "./GetChipType";

export default function Application(props) {
  const [open, setOpen] = useState(false);
  const columns = [
    {
      field: "id",
      headerName: "序号",
      flex: 1,
      editable: false,
    },
    {
      field: "courseId",
      renderCell: renderCellExpand,
      headerName: "课程号",
      flex: 3,
    },
    {
      field: "name",
      renderCell: renderCellExpand,
      headerName: "课程名称",
      flex: 5,
    },
    {
      field: "credit",
      renderCell: renderCellExpand,
      headerName: "学分",
      flex: 2,
    },
    {
      field: "capacity",
      renderCell: renderCellExpand,
      headerName: "课程容量",
      flex: 4,
      // width: 150,
    },
    {
      field: "location",
      renderCell: renderCellExpand,
      headerName: "上课地点",
      // width: 150,
      flex: 4,
    },
    {
      field: "status",
      // renderCell: renderCellExpand,
      headerName: "状态",
      renderCell: GetChipType,
      // flex: 3,
      width: 150,
    },
  ];

  return (
    <>
          <Dataform
            fileName={"考试申请列表"}
            rows={props.rows}
            loading={props.getLoading}
            columns={columns}
          />
      {/* <Button color="primary" variant="text" onClick={() => setOpen(true)} sx={{paddingTop: 1}}>
        {props.info.name}
      </Button>
      <MyDialog
        open={open}
        title="课程详情"
        onClose={() => {
          setOpen(false);
        }}
      >
        <Box>
        <Typography >
            <p>课程名称</p>
            {props.info.name}
        </Typography>
        <Typography>
            <p>任课教师</p>
            {props.info.teacher}
        </Typography>
        <Typography>
            <p>课程类型</p>
            {props.info.type}
        </Typography>
        </Box>
      </MyDialog>
      {props.info.status==="申请中"&&(
        <Chip
            label="申请中"
            color= "warning"
            variant="outlined"
            sx={{marginLeft: 10,mt: 1}}
       /> 
      )}
      {props.info.status==="申请已通过"&&(
        <Chip
            label="申请已通过"
            color= "success"
            variant="outlined"
            sx={{marginLeft: 10,mt: 1}}
       /> 
      )}
      {props.info.status==="申请未通过"&&(
        <Chip
            label="申请未通过"
            color= "error"
            variant="outlined"
            sx={{marginLeft: 10,mt: 1}}
       /> 
      )} */}
    </>
  );
}